  <template>
  <view>
    <view class="page">
      <view class="box_1">
        <view class="section_4">
          <view class="text-group_2">
            <text lines="1" class="paragraph_1">您好，<br />欢迎来到速裁通</text>
            <text lines="1" class="text_1">区块链电子签约平台</text>
          </view>
        </view>
        <view class="text-wrapper_7">
          <text lines="1" class="text_2" @click="toPassword()">切换验证码登录</text>
        </view>
        <view class="section_5">
          <view class="text-wrapper_2">
            <!-- input框 -->
            <input class='zh' type="text" placeholder="请输入手机号" maxlength="11" v-model="phone" />
          </view>

        </view>
        <view class="section_6">
          <view class="text-wrapper_3">
            <!-- input框 -->
            <input class='zh' type="text" maxlength="6" placeholder="请输入验证码" v-model="code" />
          </view>
          <view class="text-wrapper_4">
            <text lines="1" class="text_5" @click="getNoteInfo()"
              :style="number!=''?'pointer-events: none;':''">{{number}}获取验证码</text>
          </view>
        </view>
        <view class="section_7">
          <view class="text-wrapper_5">
            <text lines="1" decode="true" class="text_6" @click="login()">登&nbsp;录</text>
          </view>
        </view>
        <view class="text-wrapper_8">
          <text lines="1" class="text_7">未注册过的手机验证后自动登录</text>
        </view>
        <view class="section_8">
          <view class="section_1" :class="isAgreement?'or':''" @click="isAgreement=!isAgreement"></view>
          <text lines="1" class="text_8">本人已认真阅读，理解并同意《用户协议》和《隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    checkMobile,
    checkPassword,
    checkCode
  } from "@/common/util/verify.js"
  import {
    mapActions,
    mapState
  } from "vuex"
  export default {
    data() {
      return {
        number: '',//倒计时
        isAgreement: true,//协议
        phone: '', //手机号
        code: '', //验证码
        
      }
    },
    onLoad() {},
    methods: {
      //去密码登录
      toPassword(){
        uni.redirectTo({
          url:"/subpkg/login_password/login_password"
        })
      },
      //发验证码
      async getNoteInfo() {
        //校验手机号
        let verifyResult = await checkMobile(this.phone)
        if(!verifyResult){
          let title='手机号错误!'
          uni.$showMsg(title)
        }else{
          try{
            await this.$store.dispatch('login/getNoteInfo', this.phone)
            let title='已发送验证码请查收!'
            uni.$showMsg(title)
            
            //倒计时
            this.number = 60
            let interval = setInterval(() => {
              this.number--
              if (this.number == 0) {
                console.log(1)
                this.number = ''
                clearInterval(interval)
              }
            }, 1000)
          }catch(e){
            let title=e.message
            uni.$showMsg(title)
          }
        }

      },

      //登录
      async login() {
        //校验手机号
        let verifyResult = await checkMobile(this.phone)
        //校验验证码
        let codeResult = await checkCode(this.code)

        if(!this.isAgreement){
          let title='是否同意协议!'
          uni.$showMsg(title)
          }else{
            if(!verifyResult&&!codeResult){
              let title='不能为空!'
              uni.$showMsg(title)
            }else{
              //整理参数
              let params={
                loginFrom:2,//1企业,2个人
                phone:this.phone,//手机号
                verificationCode:this.code,//验证码
                verificationUUid:this.newUuid,//验证吗uuid
              }
              try{
                  await this.$store.dispatch('login/toLoginCode',params)
                  //跳转主页-我的
                  uni.switchTab({
                    url:'/pages/home/home'
                  })
              } catch (e){
                let title=e.message
                uni.$showMsg(title)
                console.log(e)
              }
            }
          }
          
        
        
        
        


        
      }
    },
    computed: {
      ...mapState({
         newUuid: state => state.login.uuid,
      }),
    }
  }
</script>

<style>
  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1478rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .box_1 {
    height: 1478rpx;
    background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/%E8%83%8C%E6%99%AF.png?sign=76002dd2ea34284bd676fc4105c78804&t=1659334514) 100% no-repeat;
    background-size: 100% 100%;
    width: 750rpx;
    display: flex;
    flex-direction: column;
  }


  .section_4 {
    width: 347rpx;
    height: 159rpx;
    display: flex;
    flex-direction: row;
    margin: 111rpx 0 0 89rpx;
  }

  .text-group_2 {
    width: 347rpx;
    height: 159rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .paragraph_1 {
    width: 347rpx;
    height: 118rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 48rpx;
    font-family: SimHei;
    text-align: left;
    line-height: 72rpx;
  }

  .text_1 {
    width: 213rpx;
    height: 23rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 18rpx 0 0 2rpx;
  }

  .text-wrapper_7 {
    width: 152rpx;
    height: 22rpx;
    display: flex;
    flex-direction: row;
    margin: 79rpx 0 0 90rpx;
  }

  .text_2 {
    width: 152rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 22rpx;
    font-family: SimHei;
    text-align: right;
    white-space: nowrap;
    line-height: 22rpx;
  }

  .section_5 {
    width: 570rpx;
    height: 86rpx;
    display: flex;
    flex-direction: row;
    margin: 33rpx 0 0 90rpx;
  }

  .text-wrapper_2 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 570rpx;
  }

  .text_3 {
    width: 156rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 31rpx 0 0 37rpx;
  }

  .section_6 {
    width: 570rpx;
    height: 86rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 50rpx 0 0 90rpx;
  }

  .text-wrapper_3 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 350rpx;
  }

  .text_4 {
    width: 156rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(191, 191, 191, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 26rpx;
    margin: 32rpx 0 0 36rpx;
  }

  .text-wrapper_4 {
    /* background-color: rgba(196,176,129,1.000000); */
    background-color: rgba(178, 176, 171, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    justify-content: center;
    width: 200rpx;


  }

  .text_5 {
    width: 100%;
    height: 86rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 26rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 86rpx;
    /* margin: 30rpx 0 0 0; */

  }

  .section_7 {
    width: 570rpx;
    height: 86rpx;
    display: flex;
    flex-direction: row;
    margin: 59rpx 0 0 90rpx;
  }

  .text-wrapper_5 {
    background-color: rgba(196, 176, 129, 1.000000);
    border-radius: 30rpx;
    height: 86rpx;
    display: flex;
    flex-direction: column;
    width: 570rpx;
  }

  .text_6 {
    width: 88rpx;
    height: 34rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: SimHei;
    text-align: center;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 25rpx 0 0 240rpx;
  }

  .text-wrapper_8 {
    width: 306rpx;
    height: 22rpx;
    display: flex;
    flex-direction: row;
    margin: 34rpx 0 0 223rpx;
  }

  .text_7 {
    width: 306rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 22rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 22rpx;
  }

  .section_8 {
    width: 486rpx;
    height: 19rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin-top: 109rpx;
    margin-left: 15%;
  }

  .or {
    background-color: rgba(205, 173, 102, 1.000000);
  }

  .section_1 {
    border: 1rpx solid rgba(255, 255, 255, 1);

    border-radius: 50%;
    width: 18rpx;
    height: 18rpx;
    display: flex;
    flex-direction: column;
  }

  .text_8 {
    width: 465rpx;
    height: 19rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 20rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 25rpx;
  }

  .zh {
    margin-left: 37rpx;
    margin-top: 20rpx;
    width: 300rpx;
  }
</style>
